<template>
	<!--轮播图-->
	<view>
    <view>
      <view class="top">
        <view class="search">
          <view class="search_in" @click="goSearch()">
          <image src="../../static/image/camera.png"></image>
          <input type="text" placeholder="请输入搜素内容"/>
          
          <view class="search_btn">搜索</view>
          </view>
        </view>
      </view>
    </view>
	<swiper duration="500" indicator-active-color="#008000" indicator-dots="true" indicator-color="#fff" autoplay="true"interval="3000" circular="true" style="height: 350rpx;">
	<swiper-item>
	<view class="item">
	<image src="../../static/image/ph_one.jpg" mode="widthFix" style="width: 100%;"></image>
	</view></swiper-item>
	<swiper-item>
	<view class="item">
	<image src="../../static/image/ph_two.jpg" mode="widthFix" style="width: 100%;"></image>
	</view></swiper-item>
	<swiper-item>
	<view class="item">
	<image src="../../static/image/ph_three.jpg" mode="widthFix" style="width: 100%;"></image>
	</view></swiper-item>
	<swiper-item>
	<view class="item">
	<image src="../../static/image/ph_four.jpg" mode="widthFix" style="width: 100%;"></image>
	</view></swiper-item>
	</swiper>
  <!--小应用栏-->
  <view style="padding: 10rpx;">
    <view class="styleone" >
      <view style="display: flex;">
        
          <navigator url="/pages/grass/grass" class="smallcomponent">
          <image src="../../static/image/grass.png" mode="widthFix" style="width: 60rpx;height: 60rpx;" ></image>
          <text>猜草木</text>
          </navigator>
          <navigator url="/pages/AI_tell/AI_tell" class="smallcomponent">
            <image src="../../static/image/AI.png" mode="widthFix" style="width: 60rpx;height: 60rpx;"></image>
          <text>AI咨询</text>
          </navigator>
      </view>
    </view>
  </view>
	<!--中药库-->
  <view style="padding: 10rpx;">
  <view class="styletwo">中药库</view>
  </view>
  <!--展示药材-->
  <view>
    <view class="styleone" v-for="item in displayList" :key="item.id"
      style="height: 200rpx; display: flex; grid-gap: 30rpx; margin-bottom: 10rpx;" @click="goToDetail(item.id)">
      <view style="width: 30%;">
        <image :src="item.icon" style="width: 100%; height: 200rpx; border-radius: 10rpx; display: block;"></image>
      </view>
      <view style="flex: 1; display: flex; flex-direction: column; justify-content: space-between; grid-gap: 10rpx;">
        <view style="font-size: 36rpx; font-weight: bold;">{{ item.mname }}</view>
  
        <view style="display: flex;  color: #666; ">
          <view style="flex: 1;">
            <text style="color: #ff9800; font-weight: bold;">类别：{{item.mclass}}</text>
          </view>
        </view>
        <view style="color: #ff9800;">作用：{{item.mfunction}}</view>
      </view>
    </view>
  </view>
   <view v-if="isLoading" style="text-align: center; padding: 20rpx; color: #888;">正在加载...</view>
   <view v-if="displayList.length === medicineList.length" style="text-align: center; padding: 20rpx; color: #008000;">药材已全部显示</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				medicineList:[],
        displayList:[],
        isLoading:false,
        ClickOtherTabBar:false,
        currentPage:0,    // 当前页数
        pageSize: 10,      // 每页数据数量
        hasMoreData: true, // 是否有更多数据，防止重复请求
			};
		},
    onHide() {
      //页面生命周期函数，离开当前页面时候触发
      this.ClickOtherTabBar = true
    },
    onTabItemTap(e) {
      //tabbar点击事件函数
        uni.pageScrollTo({
          scrollTop:0
        });
      // 重置currentPage为0
      this.currentPage = 0;
       // 重置displayList为前10个元素
          this.displayList = this.medicineList.slice(0, this.pageSize);
          // 由于重置了displayList
          this.hasMoreData = true;
        
    },
		onLoad() {
      this.load()

		},
    onReachBottom() {
      // 上拉加载更多数据
          if (this.hasMoreData && !this.isLoading && this.displayList.length < this.medicineList.length) {
               this.loadMoreData();
             }
    },
		methods: {
      goSearch(){
        uni.navigateTo({
          url:'/pages/search/search'
        })
      },
      goToDetail(id){
        uni.navigateTo({
          url:'/pages/detail/detail?id='+id
        })
        
      },
      load(){
        //药材数据展示
       if (this.isLoading || !this.hasMoreData) return;  // 防止重复加载或没有更多数据时再请求
       
           this.isLoading = true;  // 标记为正在加载
           this.$request.get('/medicines/selectAll', {
                   params: {
                     page: this.currentPage,
                     size: this.pageSize
                   }
                 }).then(res => {
                   const newMedicines = res.data || [];
                   if (newMedicines.length > 0) {
                      this.medicineList = this.medicineList.concat(newMedicines); // 将新数据添加到medicineList的末尾
                             this.displayList = this.medicineList.slice(0, this.currentPage * this.pageSize + this.pageSize); // 更新displayList为当前页的数据
                     this.currentPage++;
                     if (newMedicines.length < this.pageSize) {
                       this.hasMoreData = false;
                     }
                   } else {
                     this.hasMoreData = false;
                   }
                 }).catch(() => {
                   this.isLoading = false;
                 }).finally(() => {
                   this.isLoading = false;
                 });
         },
       loadMoreData() {
             if (this.isLoading || !this.hasMoreData ) return;
             this.isLoading = true;
             this.$request.get('/medicines/selectAll', {
               params: {
                 page: this.currentPage,
                 size: this.pageSize
               }
             }).then(res => {
               const newMedicines = res.data || [];
               if (newMedicines.length > 0) {
               
                 const start = this.displayList.length;
                 this.displayList = this.medicineList.slice(0, start + Math.min(newMedicines.length, this.pageSize));
                 this.currentPage++;
                 if (newMedicines.length < this.pageSize) {
                   this.hasMoreData = false;
                 }
               } else {
                 this.hasMoreData = false;
               }
             }).catch(() => {
               this.isLoading = false;
             }).finally(() => {
               this.isLoading = false;
             });
           },

		}
	}
</script>

<style>
  .search{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;
    background-color:#a1cc97;
    
  }
  .search_in{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 70rpx;
    width: 730rpx;
    background-color: #ffffff;
    border-radius: 35rpx;
    }
    image{
    height: 45rpx;
    width: 45rpx;
    }
  .search_btn{
    height: 55rpx;
    width: 110rpx;
    border-radius: 55rpx;
    background-color:#a1cc97;
    color: #ffffff;
    text-align: center;
    line-height: 55rpx;
    cursor: pointer;
  
  }
  input{
    width: 480rpx;
  }
  .styleone{
  background-color: #fff; 
  padding: 10rpx; 
  border-radius: 10rpx; 
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .2);
  height: 100rpx; 
  }
  .styletwo{
    background-color: #fff;
    padding: 10rpx; 
    border-radius: 10rpx; 
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .2);
    height: 40rpx;
    color:#008000 ; 
    font-size: 32rpx; 
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  .item{
    height: 500rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    .smallcomponent{
      flex: 1; 
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10rpx;
    }
    
</style>
